
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <title>EZOPEN播放协议</title>
  <style>
    body {
      margin: 0;
    }

    .hint {
      font-size: 14px;
      line-height: 3em;
      color: gray;
    }

    #url,
    #url2,
    #accessToken {
      width: 100%;
    }

    .btn-container {
      margin: 10px;
    }

    .normal {
      color: green;
      margin: 5px;
    }

    .error {
      color: red;
      margin: 5px;
    }

    .encript-hint {
      font-size: 14px;
      margin: 20px 10px;
      color: rgba(0, 0, 0, 0.65);
    }

    .h2-hint {
      font-weight: normal;
      font-size: 14px;

    }

    .h2-hint a {
      color: #1890ff;
    }
  </style>
</head>
<script>
</script>

<body>
  <script src="https://statics.ys7.com/openweb/assets/ezuikit_v2.6/ezuikit-2717a27b5c.js"></script>
  <script src="https://statics.ys7.com/openweb/assets/ezuikit_v2.6/js/jquery-ac3a4cccfb.min.js"></script>
  <script src="https://statics.ys7.com/openweb/common/scripts/jquery-39b5fb0510.cookie.js"></script>
  <h2>预览，回放功能示例：
    <span class="h2-hint">
      前往
      <a href="/console/device.html" target="_blank" onClick="pageLog(this)">获取监控地址</a>
      ，更有零门槛的视频接入指导，详见
      <a href="/console/ezopenIframe.html" target="_blank" onClick="pageLog(this)">开发者服务-轻应用视频</a>
    </span>
  </h2>
  <textarea id="url" placeholder="这里输入监控地址"></textarea>
  <textarea id="accessToken" placeholder="这里输入accessToken，建议生产环境使用小权限token"></textarea>
  <div class="encript-hint">
    <b>重要：</b>如果播放失败，可能是该设备已被加密，请使用关闭设备视频加密进行解密，或在ezopen地址中加入设备的验证码，加入示例如下：ezopen://验证码@open.ys7.com/203751922/1.rec
  </div>
  <div class="btn-container">
    <button id="init">初始化播放</button>
    <button id="stop">结束</button>
    <button id="getOSDTime">获取OSD时间</button>
    <button id="openSound">打开声音（默认已经开启）</button>
    <button id="capturePicture">视频截图</button>
    <button id="startSave">开始录像</button>
    <button id="stopSave">停止录像</button>
    <span>录制功能不支持加密视频，且录制的文件需要<a href="https://service.ys7.com/downloadInfoSite/admin"
        target="_blank">下载海康播放器播放</a></span>
  </div>
  <div id="playWind" style="width: 600px; height: 400px;">
  </div>
  <script>
    $("#init").click(function () {
      function handleError(e) {
        console.log('捕获到错误', e)
        //alert(e)
      }
      var url = $('#url').val().trim();
      var accessToken = $('#accessToken').val().trim();
      var decoder = new EZUIKit.EZUIPlayer({
        id: 'playWind',
        autoplay: true,
        url: url,
        accessToken: accessToken,
        decoderPath: '/assets/ezuikit_v2.6/',
        width: 600,
        height: 400,
        handleError: handleError,
      });
      // 这里是打印日志，本例抛出到播放页面
      decoder.on('log', log);
      function log(str) {
        var div = document.createElement('DIV');
        div.innerHTML = (new Date()).Format('yyyy-MM-dd hh:mm:ss.S') + JSON.stringify(str);
        document.body.appendChild(div);
      }
      $("#stop").click(function () {
        decoder.stop();
      })
      $("#getOSDTime").click(function () {
        var callback = function (iTime) {
          alert(iTime);
          console.log("iTime", iTime);
        }
        decoder.getOSDTime(callback);
      })
      $("#openSound").click(function () {
        decoder.openSound();
      })
      $("#capturePicture").click(function () {
        decoder.capturePicture(0, 'default');
      })
      $("#startSave").click(function () {
        decoder.startSave(0, 'default');
      })
      $("#stopSave").click(function () {
        decoder.stopSave(0);
      })
    })
    // 日志上报等
    function pageLog(event) {
      var from = window.location.pathname;
      var to = "";
      var userName = $.cookie("ASG_DisplayName");
      if ( event && event.getAttribute('href')) {
        to = event.getAttribute("href").split('?')[0];
      } else if (event && event.currentTarget && event.currentTarget.getAttribute('href')) {
        to = event.currentTarget.getAttribute("href").split('?')[0];
      }
      var extra = from + '_' + to;
      dclog('https://log.ys7.com/statistics.do?systemName=open_web_btn_action&bn=11&action=0&un='+ userName + '&extra=' + extra);
    }
    function dclog(dclogUrl) {
      // 上报一次本地统计信息
      const img = new Image();
      img.src = dclogUrl;
    }
  </script>
</body>

</html>